import React, {Component} from 'react';
import {
  View,
  Text,
  ImageBackground,
  StyleSheet,
  Image,
  StatusBar,
  TouchableOpacity,
  ScrollView,
  RefreshControl
} from "react-native";
import {Icon, ListItem} from 'react-native-elements'
import icon from "../../../utils/icon";
import {pxToDp} from "../../../utils/styleKits";
import Geo from "../../../utils/Geo";
import {NavigationContext} from '@react-navigation/native';
import {inject, observer} from "mobx-react";
import UserInfoStore from "../../../mobx/userInfo";

let nowDate = new Date();

let userInfo = {
  headerImg: 'https://www.itying.com/images/flutter/list2.jpg',
  nickname: '一叶知秋',
  birthday: nowDate,
  gender: '男',
  location: '广州',
  education: '本科',
  income: '15-25k',
  industry: '产品经理',
  status: '未婚'
};

let topBtn = [
  {title: '相互关注', total: 1},
  {title: '喜欢', total: 6},
  {title: '粉丝', total: 1},
];

let listData = [
  {title: '我的动态', iconColor: '#33a22a', icon: icon.icondongtai, goPage: 'trend'},
  {title: '谁看过我', iconColor: '#da2f30', icon: icon.iconshuikanguowo, goPage: 'visitors'},
  {title: '通用设置', iconColor: '#934fcd', icon: icon.iconshezhi, goPage: 'setting'},
  {title: '客服在线', iconColor: '#484bc8', icon: icon.iconkefu},
];

@inject('UserInfoStore')
@observer
class Index extends Component {
  static contextType = NavigationContext;

  state = {
    location: '正在定位中...',
    refreshing: false,
    userInfo: {},
  };

  render() {
    let { refreshing, userInfo} = this.state;
    return (
      <ScrollView style={{flex: 1}}
                  refreshControl={<RefreshControl refreshing={refreshing} onRefresh={this.onRefresh}/>}>

        <StatusBar translucent backgroundColor={"transparent"}/>
        {/*顶部导航栏*/}
        <ImageBackground source={require('../../../images/headbg.png')} style={styles.headbg}>
          {/*右边编辑按钮*/}
          <TouchableOpacity onPress={()=>this.context.navigate('userUpdate')} style={{alignItems: 'flex-end', marginRight: pxToDp(10)}}>
            <Text style={{fontFamily: 'iconfont', color: '#fff', fontSize: pxToDp(16)}}>{icon.iconbianji}</Text>
          </TouchableOpacity>

          {/*个人信息*/}
          <View style={{margin: pxToDp(10), marginBottom: pxToDp(30), flexDirection: 'row'}}>
            {/*头像*/}
            <Image source={{uri: 'https://www.itying.com/images/flutter/list2.jpg'}} style={styles.headerImg}/>
            <View style={{marginLeft: pxToDp(10), justifyContent: 'space-around'}}>
              {/*姓名*/}
              <View style={{flexDirection: "row"}}>
                <Text style={{color: '#fff', marginRight: pxToDp(20)}}>{userInfo.nickname}</Text>
                <View style={{borderRadius: pxToDp(10), backgroundColor: '#fff', justifyContent: 'center'}}>
                  <Text style={{fontFamily: 'iconfont', marginLeft: pxToDp(10), marginRight: pxToDp(10)}}>
                    <Text style={{color: 'red'}}>{icon.icontanhuanan}</Text> 23岁
                  </Text>
                </View>
              </View>

              {/*地址*/}
              <Text style={{fontFamily: 'iconfont', color: '#fff'}}>{icon.iconlocation} {userInfo.location}</Text>
            </View>
          </View>
        </ImageBackground>

        {/*顶部横向三个按钮*/}
        <View style={{position: 'relative', alignItems: 'center', height: pxToDp(80)}}>
          <View style={{
            position: 'absolute', top: pxToDp(-10), flexDirection: 'row', borderRadius: pxToDp(10),
            overflow: 'hidden', width: '90%'
          }}>
            {
              topBtn.map((item, i) => {
                // 单个按钮
                return <TouchableOpacity onPress={() => this.context.navigate('myTabNav', {index: i})} key={i} style={{
                  flex: 1, height: pxToDp(80),
                  justifyContent: 'center', alignItems: 'center', backgroundColor: '#fff'
                }}>
                  <Text>{item.total}</Text>
                  <Text>{item.title}</Text>
                </TouchableOpacity>
              })
            }
          </View>
        </View>

        {/*我的动态、谁看过我、通用设置、客服在线*/}
        <View>
          {
            listData.map((item, i) => {
              // 单个按钮
              return <ListItem key={i} bottomDivider onPress={() => item.goPage ? this.context.navigate(item.goPage) : null}>
                <Text style={{
                  fontFamily: 'iconfont', fontSize: pxToDp(20), color: item.iconColor,
                  marginRight: pxToDp(20)
                }}>{item.icon}</Text>
                <ListItem.Content>
                  <ListItem.Title>{item.title}</ListItem.Title>
                </ListItem.Content>
                <ListItem.Chevron />
              </ListItem>

            })
          }
        </View>
      </ScrollView>
    );
  }

  componentDidMount(): void {
    // let {userInfo} = this.props.UserInfoStore;
    this.setState({
      userInfo
    })


    this.props.UserInfoStore.setUserInfo(userInfo);

    this.getLocation();
    clearTimeout(this.timeId);
  }

  onRefresh = () => {
    this.setState({
      refreshing: true
    });
    this.timeId = setTimeout(() => {
      this.setState({
        refreshing: false
      })
    }, 1000)
  };

  // 获取当地时间
  getLocation = async () => {
    let res = await Geo.getCityByLocation();
    if (res.info === 'OK') {
      this.setState({
        location: res.regeocode.addressComponent.city,
      })
    }
  }

}

const styles = StyleSheet.create({
  headbg: {
    width: '100%',
    paddingTop: pxToDp(30)
  },
  headerImg: {
    width: pxToDp(60),
    height: pxToDp(60),
    borderRadius: pxToDp(30),
  }
});

export default Index;